<template>
    <div style="padding-left:10px;padding-bottom:60px">
        <!-- <ul>
            <li v-for="(movie) in filmList" :key="movie.filmId" @click="showDetail(movie.filmId)">
                
            </li>           
        </ul> -->
        <van-list v-model="isLoading" @load="onLoad" :immediate-check="false" :finished="isFinished" finished-text="没有更多了">
            <van-cell v-for="(movie) in filmList" :key="movie.filmId" @click="showDetail(movie.filmId)">
                <img :src="movie.poster" alt="">
                <div>
                    <span style="margin-left:10px">{{ movie.name }} </span>
                    <span style="background:rgb(210,214,220);color:#fff;font-size:10px;font-weight:bold"> {{ movie.filmType.name }}</span>
                </div>
                <div>
                    <span style="margin-left:10px;font-size:13px;color:rgb(121,125,130)">观众评分 <span style="color:gold;font-size:15px">{{ movie.grade }}</span></span>
                </div>
                <div style="margin-left:110px;"><p>主演:{{ movie.actors | actorsFilter }}</p></div>
                <div><span style="margin-left:10px;font-size:13px;color:rgb(121,125,130)">{{ movie.nation }} | {{ movie.runtime }}分钟</span></div>
            </van-cell>
        </van-list>
    </div>
</template>

<script>
//引入vant,使用List组件
import {List,Cell} from "vant"
//注册List和Cell组件
Vue.use(List).use(Cell)
import Vue from 'vue'
Vue.filter("actorsFilter",actors =>{
    if(!actors){
        return "暂无主演"
    }
    else{
        return actors.map(item => item.name).join(" ")
    }
    
})
import http from '@/utils/http.js'
export default{
    data(){
      return {
        filmList:[],
        isLoading:true,
        total:0,
        isFinished:false,
        pageNum:1
      }
    },
    created(){
        http({
          url:`gateway?cityId=310100&pageNum=${this.pageNum}&pageSize=10&type=1&k=8381322`,
          headers:{
                'X-Host': 'mall.film-ticket.film.list'
          }//配置headers解决跨域问题
        }).then(res => {
        //   console.log(res.data.data.total)
          this.filmList = res.data.data.films
          this.total = res.data.data.total
        //   console.log(this.total,this.filmList.length);
          this.isLoading = false
        //   console.log(this.filmList.length);
        })
    },
    methods: {
        showDetail(id){
            // console.log(id);
            this.$router.history.push("/detail/" + id)
        },
        onLoad(){          
            if(this.filmList.length === this.total){
                this.isFinished = true
                return
            }
            this.isLoading = true
            this.pageNum++
            http({
                url:`gateway?cityId=310100&pageNum=${this.pageNum}&pageSize=10&type=1&k=8381322`,
                 headers:{
                'X-Host': 'mall.film-ticket.film.list'
                }//配置headers解决跨域问题
            }).then(res =>{
                this.filmList = [...this.filmList, ...res.data.data.films]
                // console.log(this.filmList.length);
                this.isLoading = false;
            })
            // console.log("加载数据");
            
        }
    }
}
</script>

<style scoped lang="scss">
    .van-list{
        .van-cell{
            overflow:hidden;
            padding:10px;
            border-bottom: 1px solid rgb(246,246,246);
            img{
                float:left;
                width: 100px;
                height: 120px;
            }
            p{
                font-size:13px;
                color:rgb(121,125,130);
                white-space: nowrap;
                width: 180px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
</style>
